import React, { Component } from "react";
import "./Login.scss";
class App extends Component {
  state = {
    mobile: "",
    Comple: "",
    checked: true,
    error_msg:"",
  };
  //手机
//   handleMobile = (e) => {
//     console.log(e.target.value);
//     let str = "moible"
//     this.setState({
//         [str] :e.target.value
//     })
//   };
//   //验证码
//   handleComple = (e) => {
//     console.log(e.target.value);
//     let str = "Comple"
//     this.setState({
//         [str] :e.target.value
//     })
//   };
/* 校验手机号 */
validateMobile =(mobile) => {
    //校验手机号
    if(!mobile){
        this.setState({
            error_msg:"请输入手机号"
        })
        return false;
    }else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(mobile)){
        this.setState({
            error_msg:"请正确填写您的手机号码！"
        })
        return false;
    }else{
        this.setState({
            error_msg:""
        })
    }
}
//登录
handleLoginClick =(params) => {
    console.log("手机号",this.state.mobile)
    let mobile = this.state.mobile
    let valid = this.validateMobile(mobile);
    if(!valid){
        return false
    }
}
/* 合并 */
handleChang =(e) => {
    let {type,key} = e.target.dataset;
    let value="";
    if(type ==="checkbox"){
        value = e.target.checked;
    }else{
        value = e.target.value;
    }
    this.setState({
        [key] : value
    })
}
  //checkbox
//   handleChecked = (e) => {
//     console.log(e.target.checked);
//     this.setState({
//         checked :e.target.checked
//     })
//   };
  render() {
    return (
      <div className="Login">
        <div className="Login-logo">
          <img
            src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
            alt=""
          />
        </div>
        {/* 网易严选 from开始*/}
        <div className="Login-fm">
          <div className="login-mobile">
            <input
              type="text"
              data-key="mobile"
              data-type="text"
              placeholder="请输入手机号"
              value={this.state.mobile}
              onChange={this.handleChang}
            />
          </div>
          <div className="login-Comple">
            <div className="login-Comple-left">
              <input
                type="number"
                data-type="number"
                data-key="Comple"
                placeholder="请输入短信验证码"
                value={this.state.Comple}
                onChange={this.handleChang}
              />
            </div>
            <div className="login-Comple-right">
              <a href="#">获取验证码</a>
            </div>
          </div>
          {/* 校验开始 */}
          <div>
            {this.state.error_msg?<span className="error-title">{this.state.error_msg}</span>:""}
          </div>
           {/* 校验结束 */}
          {/* 网易严选 密码登录开始 */}
          <div className="login-psw">
            <div className="login-psw-left">
              <a href="#" className="login-psw-left-title">
                遇到问题?
              </a>
            </div>
            <div className="login-psw-right">
              <a href="#" className="login-psw-right-title">
                使用密码验证登录
              </a>
            </div>
          </div>
          {/* 网易严选 密码登录结束 */}
          {/* 网易严选登录开始 */}
          <div className="login-btn" onClick={this.handleLoginClick}>
            <a href="#" className="login-btn-title">
              登录
            </a>
          </div>
          {/* 网易严选登录结束 */}
          {/* 网易严选条款开始 */}
          <div className="login-agree">
            <input
              type="checkbox"
              className="login-agree-checked"
              data-type="checkbox"
              data-key="checked"
              checked={this.state.checked}
              onChange={this.handleChang}
            />
            <span className="login-agree-title">我同意</span>
            <a href="#" className="login-agree-a">
              《服务条款》
            </a>
            <span className="login-agree-title">和</span>
            <a href="#" className="login-agree-a">
              《网易隐私政策》
            </a>
          </div>
          {/* 网易严选条款结束 */}
        </div>
        {/* 网易严选 from结束*/}
      </div>
    );
  }
}

export default App;
